<template>
    <div class="custom-box p-20 m-t-20">
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>IPO资金管理银行</h3>
            <button type="button"
                @click="updialog('add')"
                class="custom-btn custom-btn-round m-l-15">
                <i class="fa fa-plus"></i>
            </button>
        </el-row>
        <el-table stripe :data="pageResult.resultData">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="IPO资金管理银行" prop="ipoName"></el-table-column>
            <el-table-column label="分行名称" prop="branchName"></el-table-column>
            <el-table-column label="转款资金" prop="specialCapital"></el-table-column>
            <el-table-column label="货币单位" prop="currencyType">
              <template slot-scope="scope">
                  {{scope.row.currencyType | getDicNameById('currencyType')}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="updialog('edit',scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.status!==1" @click="relevance(1, scope.row)">关联</el-button>
                <el-button type="text" v-else @click="relevance(2, scope.row)">取消关联</el-button>
                <el-button type="text" @click="delEventIpo(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 添加或编辑弹窗 -->
        <el-dialog :visible.sync="popUp" title="IPO资金管理银行">
          <el-form :model="companySearch">
            <el-row>
              <el-col :span="14">
                <el-form-item label="IPO资金管理银行" label-width="130px">
                  <el-input auto-complete="off" v-model="companySearch.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="1">
                <el-form-item label-width="0px">
                  <el-select v-model="companySearch.searchType" placeholder="请选择">
                    <el-option v-for="(item,index) in initView.openSearchNameType" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-button type="primary" @click="searchList">搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-form :model="eventIpoDto">
            <el-row>
              <el-col :span="23">
                <el-form-item label="分行名称" label-width="130px">
                  <el-input v-model="eventIpoDto.branchName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="专项资金" label-width="130px">
                  <el-input type="number" value="number" v-model="eventIpoDto.specialCapital">
                    <template slot="append">万</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item>
                  <el-select placeholder="请选择" v-model="eventIpoDto.currencyType">
                    <el-option v-for="(item,index) in initView.currencyType" :key="index" :label="item.dictName" :value="item.dictValue-0"></el-option>
                  </el-select>
                </el-form-item>
                </el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="23">
                <el-form-item label="备注" label-width="130px">
                  <el-input v-model="eventIpoDto.remark" type="textarea" :rows="3" maxlength="2000"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save" round>完 成</el-button>
            <el-button @click="popUp=false" round>取 消</el-button>
          </div>
          <!-- 内层列表弹窗 -->
          <el-dialog :visible.sync="companyDetailDialog" append-to-body>
            <CompanyInfoTable
              :mainCompanySearch="mainCompanySearch"
              @closeCompanyDialog="closeCompanyDialog"
              ref="companyTable"
              @getName="getName"
              >
            </CompanyInfoTable>
          </el-dialog>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import CompanyInfoTable from '../../../../components/companyTable/index.vue';
import { Component, Prop } from 'vue-property-decorator';
import ServiceIPO from '../../../../service/event/IPO/index';
import { EventIpoDto, PageResult } from '../../../../api/Interface';
import { EventPublicSearchDto } from '../../../../service/event/Interface';
import { CompanySearch } from '../../../../service/common/interface';
@Component({
    components: {
        CompanyInfoTable, // 企业信息搜索table
    }
})
export default class IPO extends Vue {
    @Prop({ default: '投行' })
    public title: string;
    public companySearch: CompanySearch = {searchType: 'full_name'} as CompanySearch; // 根据条件搜索企业
    public mainCompanySearch = {};
    public pageResult: PageResult = {} as PageResult;
    public eventIpoDto: EventIpoDto = {} as EventIpoDto;
    public eventPublicSearchDto: EventPublicSearchDto = {
        'pageParam.pageIndex': 1,
        'pageParam.pageSize': 10,
        eventId: ''
    };
    public addOrEdit: string = 'add';
    public popUp: boolean = false;
    public companyDetailDialog: boolean = false;
    public initView = {
      openSearchNameType: this.$store.state.user.dictionary.dicList.openSearchNameType,
      currencyType: this.$store.state.user.dictionary.dicList.currencyType // 币种      
    };

    // refs
    public $refs: {
        companyTable: HTMLFormElement;
    };

    // 声明周期钩子
    public mounted() {
      this.getEventIpoPage();
    }

    // 获取IPO资金监管列表
    public async getEventIpoPage() {
      this.eventPublicSearchDto.eventId = this.$route.params.eventId;
      const data = await ServiceIPO.getEventIpoPage(this.eventPublicSearchDto);
      this.pageResult = data.data;
    }
    // 添加IPO资金监管
    public async addSaveEventIpo() {
      this.eventIpoDto.specialCapital = this.eventIpoDto.specialCapital - 0;
      const { resCode } = await ServiceIPO.addSaveEventIpo(this.eventIpoDto);
      if (resCode === '0') {
        this.$message.success('添加成功！');
        this.getEventIpoPage();
        this.popUp = false;
      }
    }
    // 编辑IPO资金监管
    public async updateEventIpo() {
      const {resCode} = await ServiceIPO.updateEventIpo(this.eventIpoDto);
      if (resCode === '0') {
        this.$message.success('修改成功！');
        this.popUp = false;
      }      
    }
    // 关联
    public relevance(num: number, item: EventIpoDto) {
        const message = num === 1 ? '确定信息关联？' : '取消信息关联？';
        const info = num === 1 ? '信息关联成功！' : '取消信息关联成功！';
        this.$confirm(message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then( async () => {
          item.status = num;
            const {resCode} = await ServiceIPO.updateEventIpo(item);
            if (resCode === '0') {
                this.$message.success(info);
                this.getEventIpoPage();
            }
        });
    }
    // 删除IPO资金监管
    public async delEventIpo(id: number) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {resCode} = await ServiceIPO.delEventIpo(id.toString());
        if (resCode === '0') {
          this.$message.success('删除成功！');
          this.getEventIpoPage();
        } 
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
    // 添加或者编辑 保存按钮
    public save() {
      if (this.addOrEdit === 'add') {
        this.eventIpoDto.eventId = Number(this.$route.params.eventId);
        this.addSaveEventIpo();
      } else {
        this.updateEventIpo();
      }
    }
    // IPO弹窗
    public updialog(addOrEdit: string, param: EventIpoDto) {
      this.addOrEdit = addOrEdit;
      this.popUp = !this.popUp;
      if (addOrEdit === 'add') {
        this.eventIpoDto = {} as EventIpoDto;
        this.companySearch.name = '';
      } else {
        this.eventIpoDto = param;
        this.companySearch.name = param.ipoName;
      }
    }
    // 弹窗搜索按钮,查询企业信息
    public async searchList() {
        this.companyDetailDialog = true;
        this.mainCompanySearch = {
            name: this.companySearch.name,
            searchType: this.companySearch.searchType,
            attribute: 8,
        };
        this.$nextTick( () => {
            this.$refs.companyTable.getCompanyOpenSearchData(this.mainCompanySearch);
        });
    }
    // 获取企业id+name
    public getName(company: {id: number, name: string}) {
        this.companySearch.name = company.name;
        this.companyDetailDialog = false;
        this.eventIpoDto.ipoName = company.name.toString();
        this.eventIpoDto.ipoId = company.id;
    }
    // 关闭企业信息弹出框
    public closeCompanyDialog() {
        this.companyDetailDialog = false;
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
